import { useEffect } from "react";
import { useRef } from "react";
import { apps, type AppType } from "../defines/allapps";
const GpuCanvas = ({ app, data, callback }: { app: AppType; data?: any; callback?: (canvas: HTMLCanvasElement) => void }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const hasRuned = useRef(false);
  const currentApp = apps.find((a) => a.name === app);
  useEffect(() => {
    const canvas = canvasRef.current as HTMLCanvasElement;
    if (!canvas) {
      console.error("Canvas element not found");
      return;
    }
    if (hasRuned.current) {
      return;
    }
    hasRuned.current = true;
    currentApp?.instance.run(canvas);
  }, [app]);
  useEffect(() => {
    if (currentApp?.instance.onUpdate) {
      currentApp?.instance.onUpdate(data);
      callback?.(canvasRef.current as HTMLCanvasElement);
    }
  }, [data]);
  return (
    <div style={{ height: "90%", flex: 1 }}>
      <div
        className="description"
        dangerouslySetInnerHTML={{ __html: currentApp?.instance.description! }}
      ></div>
      <canvas style={{ width: "100%", height: "100%" }} ref={canvasRef}>
        <p>Your browser does not support the canvas element.</p>
      </canvas>
    </div>
  );
};

export default GpuCanvas;
// This is a simple React component that serves as a placeholder for the GPU Canvas functionality. It will be implemented in the future.
